<template>
	<view style="padding: 10px;">
		<u-form :model="formData" ref="uForm">
			<u-form-item label="姓名"  prop="xm"  :border-bottom="false" label-width="170" >
				<u-input v-model="formData.xm" border="true"  />
			</u-form-item>
			<u-form-item label="关系"  :border-bottom="false" label-width="170" >
				<u-input v-model="formData.gx" border="true"  />
			</u-form-item>
			<u-form-item label="身份证号"  prop="sfzh" :border-bottom="false" label-width="170" >
				<u-input v-model="formData.sfzh" :disabled="true" @click="show=!show"  border="true"  />
			</u-form-item>
			<u-form-item label="工作单位"  :border-bottom="false" label-width="170" >
				<u-input v-model="formData.gzdw"  border="true"  />
			</u-form-item>
			<u-form-item label="联系电话"  :border-bottom="false" label-width="170" >
				<u-input v-model="formData.lxdh" maxlength="11"  border="true"  />
			</u-form-item>
			<u-form-item label="户籍地"  :border-bottom="false" label-width="170" >
				<u-input v-model="formData.hjd"  border="true" />
			</u-form-item>
			<u-button @click="add()" :disabled="submitBtn" type="primary" >确认添加</u-button>
		</u-form>
		<u-keyboard ref="uKeyboard" mode="card" tips="身份证" :safe-area-inset-bottom="true" @change="valChange" @backspace="backspace" v-model="show"></u-keyboard>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false,
				submitBtn:false,
				formData:{
					id: '',
					xm: '',
					gx:'',
					sfzh: '',
					gzdw: '',
					hjd: '',
					lxdh:''
				},
				rules: {
					xm: [
						{ 
							required: true, 
							message: '请输入姓名',  
							trigger: ['change','blur'],
						}
					],
					sfzh: [
						{
							required: true, 
							message: '请输入身份证号', 
							trigger: ['change','blur'],
						},
						{
							min: 18, 
							message: '身份证号不能少于18个字符', 
							trigger: ['change','blur']
						}
					]
				}
			}
		},
		methods:{
			add(){
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.submitBtn = true;
						uni.$emit('addTzry',this.formData);
						this.$u.route({
							type:'back',
							delta: 1
						})
					} else {
						console.log('表单信息不完整');
					}
				});
				
			},
			valChange(val){
				if(this.formData.sfzh.length<18){
					this.formData.sfzh += val;
				}
			},
			backspace(){
				if(this.formData.sfzh.length) this.formData.sfzh = this.formData.sfzh.substr(0, this.formData.sfzh.length - 1);
			},
		},
		onLoad() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style>
</style>
